<template>
  <section class="todoapp">
    <Header @add="add"></Header>
    <Body :list="randerlist" @changeFlag="changeFlag" @del="del"></Body>
    <Footer
      :sum="sum"
      :clearBtn="clearBtn"
      :listType="listType"
      @changeType="changeType"
    ></Footer>
  </section>
</template>

<script>
// 引入：
import Header from "./components/Header.vue";
import Body from "./components/Body.vue";
import Footer from "./components/Footer.vue";

export default {
  components: {
    Header,
    Body,
    Footer,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          flag: true,
          value: "读万里书",
        },
        {
          id: 2,
          flag: false,
          value: "行万里路",
        },
      ],
      listType: "all",
    };
  },
  methods: {
    changeFlag(id, flag) {
      this.list.forEach((item) => {
        if (item.id === id) item.flag = flag;
      });
    },
    add(value) {
      this.list = [
        ...this.list,
        {
          id: +new Date(),
          flag: false,
          value,
        },
      ];
    },
    // 根据id删除id
    del(id) {
      this.list = this.list.filter((item) => {
        item.id !== id;
      });
    },
    changeType(value) {
      this.listType = value;
    },
  },
  computed: {
    sum() {
      return this.list.filter((item) => !item.flag).length;
    },
    clearBtn() {
      return this.list.some((item) => item.flag);
    },
    randerlist() {
      switch (this.listType) {
        case "all":
          return this.list;
        case "active":
          return this.list.filter((item) => !item.flag);
        case "completed":
          return this.list.filter((item) => item.flag);
        default:
          return this.list;
      }
    },
  },
};
</script>

<style></style>
